
var arr=[0,1,2,3,4,5,6,7,8,9];

for(var i=65;i<122;i++){
    if(i>90&&i<97){
        continue;
    }
    arr.push(String.fromCharCode(i));

}
//生成26个大写字母加26个小写字母 已经本身的10个数字
var value='';
function createCanvas(){
    var canStr='';
    for(var i=0;i<6;i++){
        var a=arr[Math.floor(Math.random()*arr.length)];
        canStr+=a+' ';
        value+=a;
    }
    var mCanvas = document.getElementById('myCanvas');//获取画布
    var ctx=mCanvas.getContext('2d');
    var mImg=new Image();
    mImg.src='./img/BG.jpg';
    mImg.onload=function(){
        var pa=ctx.createPattern(mImg,'repeat'); //指定的方向内重复指定的元素context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
        ctx.fillStyle=pa;//填充
        ctx.fillRect(0,0,mCanvas.width,mCanvas.height);//填充位置context.fillRect(x,y,width,height)
        ctx.textAlign='center';//文字居中
        ctx.fillStyle='#ccc';//文字颜色
        ctx.font='46px Roboto Slab'; // 属性设置或返回画布上文本内容的当前字体属性
        ctx.setTransform(1,-0.15,0.4,1,0,13);//(水平旋转绘图,水平倾斜绘图,垂直倾斜绘图,垂直缩放绘图,水平移动绘图,垂直移动绘图)
        ctx.fillText(canStr,mCanvas.width/2,60);//context.fillText(text,x,y,maxWidth);
    }


}
createCanvas();
$('.submit').on('click',function(){
    showResult();
});
$('.refresh').on('click',function(){
    createCanvas();
});

function showResult(){
    var inputVal=$('.inputBox input').val()
    if(value==inputVal){
        $('.inputBox span').css({
            backgroundImage:'url("./img/true.png")',
            display:'inline-block'
        })
        createCanvas();
    }else{
        $('.inputBox span').css({
            backgroundImage:'url("./img/false.png")',
            display:'inline-block'
        });
      
        $('.error').css({display:'block'}).html('验证码错误，请重新输入');
        createCanvas();
    }
}
